<template>
<div class="pop">
  <van-popup v-model="show"
             round
             class="popDiv"
             @close="closePop"
             :style="{width: '90%', bottom: '50px', height: height}">
    <div style="width: 100%;height: 100%;overflow: auto">
    <div class="pop_header">
      <span class="blue"  @click="closePop">取消</span>
      <span>{{title}}</span>
      <span class="blue" @click="confirm">确认</span>
    </div>
    <div class="pop_content">
      <ul v-if="dataList.length > 0">
        <li
          @click.stop="clickLi(item)"
          :class="item.select == true ? 'select' : ''"
          v-for="(item, index) in dataList" :key="index">
          <a >{{item.text}}</a>
          <img class="selectImg" v-if="item.select == true" src="../../assets/radio/方形选中.png" alt="">
          <img class="selectImg" v-else src="../../assets/radio/方形未选中.png" alt="">
        </li>
      </ul>
      <van-empty
       v-else
        style="width: 100%;height: 60%"
        class="custom-image"
        :image="require('../../assets/空两本书.png')"
        description="暂无数据"
      />
    </div>
    <div class="pop_bottom">
      <div class="allSelect" @click="selectAll">
        <img v-if="allSelect == true" class="selectImg" src="../../assets/radio/方形选中.png" alt="">
        <img v-else class="selectImg" src="../../assets/radio/方形未选中.png" alt="">
<!--        {{allSelect == true ? '全不选' : '全选'}}-->
        全选
      </div>
      <button @click="selectAll(0)">重置</button>
    </div>
    </div>
  </van-popup>
</div>
</template>

<script>
export default {
  name: 'PopSelect',
  props: {
    show: {
      type: Boolean,
      default: false,
      // 是否为必传
      required: true
    },
    height: {
      type: String,
      default: '',
      // 是否为必传
      required: false
    },
    title: {
      type: String,
      // 默认值 没有引入传递参数
      default: '请选择',
      // 是否为必传
      required: false
    },
    dataList: {
      type: Array,
      default: function () {
        return []
      },
      required: true
    }
  },
  data () {
    return {
    }
  },
  computed: {
    allSelect () {
      let isTrue = true
      if (this.dataList.length > 0) {
        this.dataList.forEach((curr, index) => {
          if (curr.select === true) {
          } else {
            isTrue = false
            return false
          }
        })
      } else {
        isTrue = false
      }
      return isTrue
    }
  },
  mounted () {
  },
  methods: {
    selectAll (num) {
      let trueOrfalse
      if (num == 0) {
        trueOrfalse = false
      } else {
        trueOrfalse = !this.allSelect
      }
      this.dataList.forEach((curr, index) => {
        this.$set(curr, 'select', trueOrfalse)
      })
    },
    // 关闭事件 给父组件传值
    closePop () {
      // this.selectAll(0)
      this.$emit('close')
    },
    clickLi (item) {
      if (!item.select) {
        this.$set(item, 'select', true)
      } else {
        item.select = !item.select
      }
      // this.$emit('selectLi', this.dataList)
    },
    // 确认按钮
    confirm () {
      this.$emit('confirmMethod')
      this.closePop()
    }
  }
}
</script>

<style scoped lang="scss">
.blue{
  color: #1da4f2;
}
.pop{
  font-size: 15px;
}
.popDiv{
  max-height: 80%;
}
.pop_header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #E5E5E5;
  font-weight: bold;
  position: sticky;
  top: 0;
  background: #FFFFFF;
  span{
    flex: 1;
      display: flex;
    &:nth-child(2){
      justify-content: center;
    }
    &:last-child{
      justify-content: flex-end;
    }
  }
}
.pop_content{
  ul{
    li{
      width: 100%;
      height: 44px;
      padding: 0 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #E5E5E5;
      &:last-child{
        margin-bottom: 50px;
      }
    }
  }
}
.selectImg{
  width: 16px;
  height: 16px;
}
.pop_bottom{
  width: 100%;
  background: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  //position: sticky;
  //bottom: 0;
  .allSelect{
    flex: 1;
    margin-left: 10px;
    display: flex;
    align-items: center;
    img{
      margin-right: 5px;
    }
  }
  button{
    width: 150px;
    height: 49px;
    background: linear-gradient(90deg, #2F9EE5, #2FD6F2);
    border: none;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: bold;
  }
}
.select{
  color: #1da4f2!important;
}
</style>
